import cn from 'classnames';
import { Todo } from './Todo';
import { useTodosActions } from '../hooks/useTodosActions';

export function Todos() {
  const {
    send,
    todo,
    todos,
    filter,
    numActiveTodos,
    allCompleted,
    mark,
    filteredTodos,
    inputRef
  } = useTodosActions();

  return (
    <section className="todoapp">
      <header className="header">
        <h1>todos</h1>
        <input
          ref={inputRef}
          className="new-todo"
          placeholder="What needs to be done?"
          autoFocus
          onKeyDown={(ev) => {
            if (ev.key === 'Enter') {
              send({ type: 'newTodo.commit', value: ev.currentTarget.value });
            }
          }}
          onChange={(ev) =>
            send({ type: 'newTodo.change', value: ev.currentTarget.value })
          }
          value={todo}
        />
      </header>

      {!!todos.length && (
        <>
          <section className="main">
            <input
              id="toggle-all"
              className="toggle-all"
              type="checkbox"
              checked={allCompleted}
              onChange={() => {
                send({
                  type: 'todo.markAll',
                  mark: allCompleted ? 'active' : 'completed'
                });
              }}
            />
            <label htmlFor="toggle-all" title={`Mark all as ${mark}`}>
              Mark all as {mark}
            </label>
            <ul className="todo-list">
              {filteredTodos.map((todo) => (
                <Todo key={todo.id} todo={todo} />
              ))}
            </ul>
          </section>

          <footer className="footer">
            <span className="todo-count">
              <strong>{numActiveTodos}</strong> item
              {numActiveTodos === 1 ? '' : 's'} left
            </span>
            <ul className="filters">
              <li>
                <a
                  className={cn({
                    selected: filter === 'all'
                  })}
                  href="#/"
                >
                  All
                </a>
              </li>
              <li>
                <a
                  className={cn({
                    selected: filter === 'active'
                  })}
                  href="#/active"
                >
                  Active
                </a>
              </li>
              <li>
                <a
                  className={cn({
                    selected: filter === 'completed'
                  })}
                  href="#/completed"
                >
                  Completed
                </a>
              </li>
            </ul>
            {numActiveTodos < todos.length && (
              <button
                onClick={() => send({ type: 'todos.clearCompleted' })}
                className="clear-completed"
              >
                Clear completed
              </button>
            )}
          </footer>
        </>
      )}
    </section>
  );
}
